import { Fragment, useCallback } from 'react'
import { Button, Col, Form, Input, Row, Select } from 'antd';

const options = [
  { value: "1", label: "大一上" },
  { value: "2", label: "大一下" },
  { value: "3", label: "大二上" },
  { value: "4", label: "大二下" },
  { value: "5", label: "大三上" },
  { value: "6", label: "大三下" },
  { value: "7", label: "大四上" },
  { value: "8", label: "大四下" },
]

export default function CourseSearch({
  onFinish,
  Reset,
  role,
  classes
}) {
  const [form] = Form.useForm();

  const handleReset = useCallback(() => {
    form.resetFields();
  }, [form]);

  const teaItems = [
    { name: "fd_semester", label: "学年", options: options, value: "1", placeholder: "请选择学年" },
    { name: "fd_week", label: "周次", value: "1", placeholder: "请输入周次" },
    { name: "fd_claNum", label: "班级", options: classes, placeholder: "请选择班级" },
  ]

  const stuItems = [
    { name: "fd_semester", label: "学年", value: "1", options: options, },
    { name: "fd_week", label: "周次", value: "1" },
  ]



  return (
    <Fragment>
      <Form
        form={form}
        name="advanced_search"
        onFinish={onFinish}
        size="small"
      >
        <Row gutter={32} >
          {
            (role?.fd_type === "teacher" ? teaItems : stuItems).map(item => {
              return (
                <Col span={5} key={item.name}>
                  <Form.Item
                    name={item.name}
                    label={item.label}
                    initialValue={item.value}
                  >
                    {
                      item.name === "fd_week" ?
                        <Input /> :
                        <Select
                          showSearch
                          listHeight={90}
                          style={{ width: 130 }}
                          key="value"
                          filterOption={(input, option) =>
                            (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                          }
                          filterSort={(optionA, optionB) =>
                            (optionA?.label ?? '').toLowerCase().localeCompare((optionB?.label ?? '').toLowerCase())
                          }
                          options={item.options}
                          placeholder={item.placeholder}
                        />
                    }
                  </Form.Item>
                </Col>
              )
            })
          }
          <Col className="course-sea-but" span={3}>
            <Form.Item>
              <Button htmlType='submit'>检索</Button>
              <Button onClick={() => {
                handleReset()
                Reset()
              }}>重置</Button>
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Fragment>
  )
}
